<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 引入socket.io -->
    <!--这里边引入的socket.io.js文件并不是本地的文件,socket是引入的socket服务中的js文件-->
    <script src="/socket.io/socket.io.js"></script>
    <script src="/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="/csszong/bootstrap.min.css">
    <link rel="stylesheet" href="/csszong/css.css">
    <link rel="stylesheet" href="/img/icon/iconfont.css">
    
    <style>
    </style>
    <title>聊天室</title>
  </head>
  <body>
    <a class="login btn btn-info" href="/login">登录</a>
    <a class="login btn btn-info" href="/tuichulogin">退出登录</a>
    <div class="user"><%=user%></div>
    <div class="phone"><%=phone%></div>
    <div class="getnicheng"><%=nicheng%></div>
    <div class="shangxian"></div>
    <!-- 搜一搜页面 -->
    <div class="left_souyisou">
      <div class="souyisou_one">
        <div class="sousou1 sss l"><span class="iconfont icon-xiangzuojiantou"></span></div>
        <div class="sousou2 sss l"><span class="iconfont icon-xiangyoujiantou"></span></div>
        <div class="sousou3 sss l"><span class="iconfont icon-shuaxin"></span></div>
        <div class="sousou4 sss r"><span class="iconfont icon-cuowuguanbiquxiao"></span></div>
        
        <div class="sousou5 sss r"><span class="iconfont icon-zuidahua"></span></div>
        <div class="sousou6 sss r"><span class="iconfont icon-jianhao"></span></div>
      </div>
      <div class="sousou_logo">
        <div class="sou_logo l"><span class="iconfont icon-souyisou"></span></div>
        <div class="sousou_wenben l">搜一搜</div>
      </div>
      <div class="souyisou_two">

      
        <div class="sou_sousuokuang l"><input type="text" /></div>
        <div class="sou_sousuo l">搜索</div>
      </div>
      <div class="souyisou_three">
        <div class="sou_liebiao l">全部</div>
        <div class="sou_liebiao ssss l">文章</div>
        <div class="sou_liebiao ssss l">表情</div>
        <div class="sou_liebiao ssss l">公众号</div>
        <div class="sou_liebiao ssss l">小程序</div>
        <div class="sou_liebiao ssss l">朋友圈</div>
      </div>
      <div class="souyisou_four">
        <div class="fenge1 l">
          <hr class="hr">
        </div>
        <div class="jinriredian l">今日热点</div>
        <div class="fenge2 l">
          <hr class="hr">
        </div>
      </div>
      <div class="souyisou_five">
        <div class="gonggg">
          <div class="gongge l">
            <div class="l xuhao1">1</div>
            <div class="l">清华北大已与高考900分男生联系</div>
          </div>
          <div class="gongge l">
            <div class="l xuhao5">5</div>
            <div class="l">拜登考虑以行政命令对抗...</div>
          </div>
        </div>

        <div class="gonggg">
          <div class="gongge l">
            <div class="l xuhao2">2</div>
            <div class="l">饿高官称若爆发三战将先炸伦敦</div>
          </div>
          <div class="gongge l">
            <div class="l xuhao6">6</div>
            <div class="l">懒羊羊23岁了</div>
          </div>
        </div>
      <div class="gonggg">
        <div class="gongge l">
          <div class="l xuhao3">3</div>
          <div class="l">泰航回应女星李紫婷爱犬托运死亡</div>
        </div>
        <div class="gongge l">
          <div class="l xuhao7">7</div>
          <div class="l">2岁女童被保姆遗留电梯...</div>
        </div>
      </div>
      <div class="gonggg">
        <div class="gongge l">
          <div class="l xuhao4">4</div>
          <div class="l">全国开展夏季治安打击整治百日...</div>
        </div>
        <div class="gongge l">
          <div class="l xuhao8">8</div>
          <div class="l">苏炳添在美国因发烧退赛</div>
        </div>
      </div>
      </div>
    </div>
    

    <div class="max">
      <!-- 工具   小程序 -->
      <div class="xiaochengxu left_gongju">

        <div class="xiaochengxuone">
          <div class="l bai">小程序</div>
          <div class="r x_search"><span class="iconfont icon-search"></span></div>
        </div>

        <div class="zuijinshiyong">
          <div class="x_wen l">最近使用</div>
          <div class="x_jiantou r"></div>
        </div>

        <div class="x_xiaochengxu">

          <div class="x_one l">
            <div class="x1">
              <img src="/img/images/x1.webp" alt="">
            </div>
            <div class="x_ming">外卖红包</div>
          </div>
          <div class="x_one l">
            <div class="x1">
              <img src="/img/images/x2.webp" alt="">
            </div>
            <div class="x_ming">傲客美食</div>
          </div>
          <div class="x_one l">
            <div class="x1">
              <img src="/img/images/x3.webp" alt="">
            </div>
            <div class="x_ming">口算星球</div>
          </div>
          <div class="x_one l">
            <div class="x1">
              <img src="/img/images/x4.webp" alt="">
            </div>
            <div class="x_ming">智能报名照</div>
          </div>
          <div class="x_one l">
            <div class="x1">
              <img src="/img/images/x5.webp" alt="">
            </div>
            <div class="x_ming">配音鸭</div>
          </div>
          <div class="x_one l">
            <div class="x1">
              <img src="/img/images/x6.webp" alt="">
            </div>
            <div class="x_ming">头像加字</div>
          </div>
          <div class="x_one l">
            <div class="x1">
              <img src="/img/images/x7.webp" alt="">
            </div>
            <div class="x_ming">迷彩虎</div>
          </div>
          <div class="x_one l">
            <div class="x1">
              <img src="/img/images/x8.webp" alt="">
            </div>
            <div class="x_ming">求大夫鉴定</div>
          </div>
          

        </div>
        <div class="x_wode">
          还没有我的小程序,选中小程序右键可添加
        </div>

      </div>

      <!-- 工具   手机 -->
      <div class="shouji left_gongju">
        <div class="shouji1">手机正在浏览和浮窗的内容会在这里展示</div>
        <div class="wenjianzhushou">
          <div class="greenquan l"><span class="iconfont icon-wenjianjia"></span></div>
          <div class="l shouji2">文件传输助手</div>
        </div>
      </div>
      <!-- 工具  更多 -->
      <div class="gengduo left_gongju">
        <div><span>视频号直播</span></div>
        <div><span>意见反馈</span></div>
        <div><span>备份与恢复</span></div>
        <div><span>设置</span></div>
      </div>
      <!-- 聊天的区域 -->
      <div class="zuo l">
        <div class="gongju_list l">
          <div class="touxiang"><img src="/img/images/a5.jpg" alt=""></div>
          <div class="lgongju1"><span class="iconfont icon-24gf-bubble" title="聊天"></span></div>
          <div class="lgongju2"><span class="iconfont icon-tongxunlu" title="通讯录"></span></div>
          <div class="lgongju3"><span class="iconfont icon-ego-box" title="收藏"></span></div>
          <div class="lgongju4"><span class="iconfont icon-wenjianjia" title="聊天文件"></span></div>
          <div class="lgongju5"><span class="iconfont icon-pengyouquan" title="朋友圈"></span></div>
          <div class="lgongju6"><span class="iconfont icon-shouye" title="视频号"></span></div>
          <div class="lgongju7"><span class="iconfont icon-kanyikan" title="看一看"></span></div>
          <div class="lgongju8"><span class="iconfont icon-souyisou" title="搜一搜"></span></div>
          
          <div class="lgongju9 paita"><span class="iconfont icon-xiaochengxu" title="小程序"></span></div>
          <div class="lgongju10 paita"><span class="iconfont icon-shouji" title="手机"></span></div>
          <div class="lgongju11 paita"><span class="iconfont icon-gengduo" title="更多"></span></div>
        </div>
        <div class="friend_list l">
          <div class="search_add">
            <div class="search">
              <div class="sou l"><span class="iconfont icon-search"></span></div>
              <div class="kuang l"> 
                <input type="text" class="inp_search" />
              </div>
            </div>
            <div class="add l"><span class="iconfont icon-jiahao1"></span></div>
          </div>
          <div class="f_list">
            <div class="friendn">
              <div class="tou l"><img src="/img/images/a11.jpg" alt=""></div>
              <div class="zhong l">
                <div class="beizhu">谢文迪</div>
                <div class="zuijinxiaoxi">明晚九点明晚九点明晚九点明晚九点明晚九点</div>
              </div>
              <div class="r">
                <div class="shijian">22/4/18</div>
                <div class="zaixian a1">在线</div>
              </div>
            </div>
             <div class="friendn">
              <div class="tou l"><img src="/img/images/a22.jpg" alt=""></div>
              <div class="zhong l">
                <div class="beizhu">黄儿子</div>
                <div class="zuijinxiaoxi">你是傻逼吗</div>
              </div>
              <div class="r">
                <div class="shijian">22/4/18</div>
                <div class="zaixian a2">在线</div>
              </div>
            </div>
            <div class="friendn">
              <div class="tou l"><img src="/img/images/a33.jpg" alt=""></div>
              <div class="zhong l">
                <div class="beizhu">刘心悦</div>
                <div class="zuijinxiaoxi">拜拜</div>
              </div>
              <div class="r">
                <div class="shijian">22/4/18</div>
                <div class="zaixian a3">在线</div>
              </div>
            </div>
            <div class="friendn">
              <div class="tou l"><img src="/img/images/a44.jpg" alt=""></div>
              <div class="zhong l">
                <div class="beizhu">李凤岩</div>
                <div class="zuijinxiaoxi a4">拜拜</div>
              </div>
              <div class="r">
                <div class="shijian">22/4/18</div>
                <div class="zaixian">在线</div>
              </div>
            </div>
            <div class="friendn">
              <div class="tou l"><img src="/img/images/a55.jpg" alt=""></div>
              <div class="zhong l">
                <div class="beizhu">曹颖</div>
                <div class="zuijinxiaoxi">拜拜</div>
              </div>
              <div class="r">
                <div class="shijian">22/4/18</div>
                <div class="zaixian a5">在线</div>
              </div>
            </div>
            
           
              
            
             
          </div> 
          

        </div>
      </div>
      <div class="you l">
        <div class="top_right">
          <div class="names l">生椰聊天室</div>
          <div class="top_btn r">
            <div class="top_btn1 r"><span class="iconfont icon-cuowuguanbiquxiao"></span></div>
            <div class="top_btn2 r"><span class="iconfont icon-zuidahua"></span></div>
            <div class="top_btn3 r"><span class="iconfont icon-jianhao"></span></div>
            <div class="top_btn4 r"><span class="iconfont icon-xiaoxi2"></span></div>
          </div>
        </div>
        

        <div class="top">
          <!-- 聊天区域 -->
          
        </div>
          <!-- 聊天的区域结束 -->

          <!--数据聊天内容的-->
          <div>

            <div class="gongju">
              <div class="gongju1 l"><span class="iconfont icon-xiaolian" title="表情"></span></div>
              <div class="gongju2 l"><span class="iconfont icon-wenjianjia" title="发送文件"></span></div>
              <div class="gongju3 l"><span class="iconfont icon-5jietu-1" title="截屏(Alt+A)"></span></div>              
              <div class="gongju4 l"><span class="iconfont icon-xiaoxi" title="聊天记录"></span></div>
              <div class="gongju5 r"><span class="iconfont icon-31dianhua" title="直播"></span></div>
              <div class="gongju6 r"><span class="iconfont icon-quanquanb" title="语音聊天"></span></div>
            </div>
          <div class="shuru" name="" id="">
            <textarea name="" id="" cols="51" rows="3"></textarea>
          </div>
          <div class="send_btn r">
            <div class="send">发送(S)</div>
          </div>
        </div>

        <div id="kuang">
          <div class="left">
            <div class="l mc touxiang_meself">
              <img src="/img/images/2.jpg" alt="">
            </div>
            <div class="l fasongxinxi">
              <div class="nicheng">谢文迪</div>
              <div class="mn">宝贝~~想你了</div>
            </div>
          </div>

          <div class="right">
            <div class="r mc2">
              <img src="/img/images/2.jpg" alt="">
            </div>
            <div class="jieshouxinxi r">
              <div class="r">
                <div class="oc">讨厌~死鬼!</div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    
      <div class="liaotianjilu">
        <div class="yitiao">
          <div class="qunming l">沈阳叩丁狼前端67期</div>
        <div class="r youshang1">
          <span class="iconfont icon-cuowuguanbiquxiao"></span>
        </div>
        <div class="r youshang2">
          <span class="iconfont icon-jianhao"></span>
        </div>
        </div>
        
        <!-- 搜索框 -->
        <div class="search_jilu">
          <div class="searc l">
            <span class="iconfont icon-search"></span>
          </div>
          <div class="sousuojilu l"><input type="text" placeholder="搜索"></div>
        </div>
        <!-- 选项卡 -->

        <div class="xuanxiang">
          <div class="xuanxiang1 l">全部</div>
          <div class="xuanxiang2 l">文件</div>
          <div class="xuanxiang3 l">图片与视频</div>
          <div class="xuanxiang4 l">链接</div>
        </div>

        <!-- 记录 -->
        <div class="tian">

      
          <div class="meitiaojilu">
            <!-- <div class="wid"> -->

            
              <div class="xian">
                <div class=" l ren">
                  <img src="/img/images/2.jpg" alt="">
                </div>
                <div class="l zhongjian">
                  <div class="ming">谢文迪</div>
                  <div class="wen">宝贝~~想你了</div>
                </div>
                <div class="zuotian r">昨天</div>
              </div>
            </div>
          <!-- </div> -->

        </div>



      </div>
     
     
  </body>
  <script src="/jszong/js.js"></script> 
</html>
